<template>
    <div class="power-card" ref="echartsPoly"></div>
</template>

<script>
export default {
    name: 'power-card',
    props: {
        chartsData: {
            type: Array,
            required: true
        },
    },
    data() {
        return {
            frist: true,
            title: '',
            myChart: null,
        }
    },
    watch: {
        chartsData: {
            handler(newData) {
                this.initEchart(newData)
            }
        },
    },
    methods: {
        initEchart(newData) {
            // console.log(newData, 'new');
            const seriesGroup = []
            let ArrSeries = []
            if (newData[0].length !== 0) {
                ArrSeries = [...newData[0]]
                ArrSeries.shift()
                this.title = ArrSeries[0].match(/.{2}$/)[0]
                ArrSeries.forEach((item) => {
                    if(item === "位移"){
                        seriesGroup.push({
                            encode: {
                                x: 'createTime',
                                y: item
                            },
                            name: item,
                            type: 'line',
                            yAxisIndex:1,
                            symbol: 'circle' // 节点样式
                        })
                    }else{
                        seriesGroup.push({
                            encode: {
                                x: 'createTime',
                                y: item
                            },
                            name: item,
                            type: 'line',
                            yAxisIndex: 0,
                            symbol: 'circle' // 节点样式
                        })
                    }
                })
            }
            try {
                this.myChart.dispose()
            } catch (e) {
                // console.log(e)
            }
            this.myChart = this.$echarts.init(this.$refs.echartsPoly)
            const option = {
                color: ['#00BBF7', '#06FDBC', '#FD8601' ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    },
                    padding: 3,
                    textStyle: {
                        fontSize: 10,
                        lineHeight: 15
                    }
                },
                legend: {
                    data: ArrSeries,
                    icon: 'rect',
                    right: 20,
                    itemWidth: 8,
                    itemHeight: 8
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 'auto',
                        formatter: function (value) {
                            return value.slice(11, 16)
                        },
                        textStyle: {
                            fontSize: 8
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        splitNumber: 6,
                    },
                    {
                        max:'1800',
                        type: 'value',
                        splitNumber: 6,
                    },
                ],
                series: seriesGroup,
                dataset: {
                    source: newData
                }
            }
            option && this.myChart.setOption(option)
        }
    }
}
</script>

<style  scoped>
.power-card {
    width: 100%;
    height: 250px;
}

.card {
    background-color: #ffffff;
}

.head {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 3px 10px;
    margin-top: 14px;

    &-status {
        font-size: 13px;
        margin-left: 150px;
        padding: 7px;
        border-radius: 15px;
        background-color: #f2f2f2;
    }

    &-left {
        width: 5px;
        height: 30px;
        background-color: #01bb70;
    }
}
</style>
